<script setup>
import {ref} from 'vue'
import { formatTime } from '@/utils/format'
import { articleGetService, articleDelService } from "@/api/article"
import {Delete, Edit} from "@element-plus/icons-vue";
import ChannelSelect from "@/components/ChannelSelect.vue";
import ArticleEdit from "@/components/ArticleEdit.vue";

const formModel = ref({
  pagenum: 1,
  pagesize: 10,
  cate_id: '',
  state: '',
})
const total = ref(0)

// 表格loading效果
const loading = ref(false)

const articleList = ref([])

// 获取文章列表
const getArticleList = async () => {
  loading.value = true
  const res = await articleGetService(formModel.value)
  articleList.value = res.data
  total.value = res.total
  loading.value = false
}
getArticleList()

// 每页条数变化时
const handleSizeChange = (size) => {
  formModel.value.pagesize = size
  formModel.value.pagenum = 1
  getArticleList()
}

// 页数变化时
const handleCurrentChange = (num) => {
  formModel.value.pagenum = num
  getArticleList()
}

// 搜索
const search = () => {
  formModel.value.pagenum = 1
  getArticleList()
}

// 重置
const reset = () => {
  formModel.value.pagenum = 1
  formModel.value.state = ''
  formModel.value.cate_id = ''
  getArticleList()
}

const drawer = ref()
// 添加文章
const onAddArticle = () => {
  drawer.value.open({})
}

// 编辑文章
const onEditArticle = (row) => {
  drawer.value.open(row)
}

// 删除文章分类
const onDeleteArticle = async (row) => {
  await ElMessageBox.confirm(
    '你确认删除该文章吗？',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  await articleDelService(row.id)
  ElMessage.success('删除成功')
  formModel.value.pagenum = Math.max(Math.min(Math.ceil((total.value - 1) / formModel.value.pagesize), formModel.value.pagenum), 1)

  await getArticleList()
}

// 添加或编辑成功后刷新列表
const onSuccess = (type) => {
  if (type === 'add') {
    formModel.value.pagenum = Math.ceil((total.value + 1) / formModel.value.pagesize)
  }
  getArticleList()
}

</script>

<template>
  <PageContainer title="文章管理">
    <template #extra>
      <el-button @click="onAddArticle" type="primary">发布文章</el-button>
    </template>

<!--    搜索框-->
    <el-form ref="form" inline>
      <el-form-item label="文章分类">
<!--        下拉框组件-->
        <channel-select width="240px" v-model="formModel.cate_id"></channel-select>
      </el-form-item>
      <el-form-item label="发布状态">
        <el-select v-model="formModel.state" style="width: 240px">
          <el-option label="已发布" value="已发布"/>
          <el-option label="草稿" value="草稿"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

<!--    表格-->
    <el-table v-loading="loading" :data="articleList" style="width: 100%">
      <el-table-column label="文章标题">
        <template #default="{ row }">
          <el-link type="primary" :underline="'never'">{{ row.title }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="cate_name" label="分类"/>
      <el-table-column label="发布时间">
        <template #default="{ row }">
          {{ formatTime(row.pub_date) }}
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态"/>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button @click="onEditArticle(row)" type="primary" :icon="Edit" plain
                     circle></el-button>
          <el-button @click="onDeleteArticle(row)" type="danger" :icon="Delete" plain
                     circle></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>

<!--    分页-->
    <el-pagination
      v-model:current-page="formModel.pagenum"
      v-model:page-size="formModel.pagesize"
      :page-sizes="[2, 3, 5, 10]"
      :background="true"
      layout="jumper, total, sizes, prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 20px; justify-content: flex-end"
    />

<!--    添加/编辑-->
    <article-edit @success="onSuccess" ref="drawer"></article-edit>
  </PageContainer>
</template>
